<template>
  <div class="studentList">
    <courseHeadInfo :courseInfo="courseInfo" />
    <div class="main">
      <div class="toolBar">
        <div class="searchInput">
          <el-input
            placeholder="输入学号 / 姓名 / 班级"
            v-model="search"
            class="input-with-select"
          >
            <el-button slot="append" icon="iconfont iconsearch"></el-button>
          </el-input>
        </div>
        <selectClassBtn
          :courseData="courseData"
          :defaultSelct="$route.query.filter"
          :collapseTags="true"
          @handleChange="handleChange"
        />
        <div class="dropdownMenu" :class="{ showMenu: showMenu }">
          <el-dropdown
            ref="studentList-dropdown"
            @visible-change="handelChange"
            trigger="click"
          >
            <span class="el-dropdown-link">
              <img
                :src="require('@/assets/images/sort.png')"
                class="sortIcon"
              />
              排序
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu
              slot="dropdown"
              class="studentList-sortdropdownMenu"
            >
              <el-dropdown-item @click.native="handelSort('stuNum')"
                >按学号</el-dropdown-item
              >
              <el-dropdown-item @click.native="handelSort('finishedCount')"
                >按进度</el-dropdown-item
              >
              <el-dropdown-item @click.native="handelSort('realName')"
                >按姓名</el-dropdown-item
              >
              <!-- <el-dropdown-item @click.native="handelSort('team')"
                >按小组</el-dropdown-item
              > -->
              <el-dropdown-item @click.native="handelSort('score')"
                >按总分</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="multipleStudent-btn">
          <button @click="handelSelectMore">批阅多人</button>
        </div>
        <div class="changePageStatus" @click="handleChangePageStatus">
          <img
            :src="require('@/assets/images/changeTableIcon.png')"
            :title="pageStatus ? '列表布局' : '卡片布局'"
          />
          <img
            :src="require('@/assets/images/changeTableIcon_hover.png')"
            :title="pageStatus ? '列表布局' : '卡片布局'"
            class="changePageStatus_hover_img"
          />
        </div>
      </div>
      <div class="students" v-if="pageStatus"
        v-loading="loading"
        element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-row class="item-listBox">
          <!-- <router-link
            :to="{
              name: 'Correct',
              query: {
                currNo: $route.query.currNo,
                courseID: $route.query.courseID,
              },
            }"
          > -->
          <el-col
            :xs="11"
            :sm="7"
            :md="7"
            :lg="5"
            :xl="5"
            v-for="(citem, cindex) in filterStudents"
            :key="cindex"
            class="studentInfo"
            :class="{
              twoisLast: !((cindex + 1) % 2),
              treeisLast: !((cindex + 1) % 3),
              fourisLast: !((cindex + 1) % 4),
              fiveisLast: !((cindex + 1) % 5),
            }"
            @click.native="handelRoute(citem)"
            :title="citem.name"
          >
            <div
              class="name"
              :title="
                citem.realName || citem.nickName || citem.email || citem.regName
              "
            >
              {{
                citem.realName ||
                citem.nickName ||
                citem.email ||
                citem.regName ||
                "姓名：无"
              }}
            </div>
            <div class="teamName">{{ citem.className || "班级：无" }}</div>
            <div class="teamName">{{ citem.stuNum || "学号：无" }}</div>
            <div class="picture">
              <div class="imgBox">
                <img v-lazy="citem.iconPath" />
              </div>
            </div>
            <div class="scoreBox">
              <div class="score">
                <span
                  >{{ citem.maxScore == -8 ? 0 : citem.maxScore || 0
                  }}<span class="badge"
                    ><img
                      :src="require('@/assets/images/hightIcon.png')" /></span
                ></span>
              </div>
              <div class="score">
                <span>
                  {{ citem.avgScore == -8 ? 0 : citem.avgScore || 0
                  }}<span class="badge"
                    ><img
                      :src="require('@/assets/images/averageIcon.png')" /></span
                ></span>
              </div>
              <div class="score">
                <span
                  >{{ citem.minScore == -8 ? 0 : citem.minScore || 0
                  }}<span class="badge"
                    ><img :src="require('@/assets/images/lowICon.png')" /></span
                ></span>
              </div>
            </div>
            <statisticsTask :student="citem" />
          </el-col>
          <!-- </router-link> -->
        </el-row>
        <div
          class="nStusTips"
          style="margin-top: 10px"
          v-if="!filterStudents.length"
        >
          {{loading? "" : "暂无学生学习"}}
        </div>
      </div>
      <FollowTable
        :tableData="filterStudents"
        v-else
        @showDeleteDialog="showDeleteDialog"
      />
      <el-dialog
        :visible.sync="showSelectMoreStudent"
        width="58vw"
        custom-class="selectMoreStudentsDialog"
        :lock-scroll="true"
      >
        <div slot="title" class="dialogHead">
          <div class="countStudent">
            {{ selectedStudent.length }}/{{ studentsList.length }}
          </div>
          <div class="closeIcon">
            <img
              :src="require('@/assets/images/closeIcon.png')"
              @click="closeDialog"
            />
          </div>
        </div>
        <div class="contentBox">
          <div class="unselect">
            <div class="title">学生列表 · 批阅多人</div>
            <div class="studentsList">
              <div class="nStusTips" v-if="!filterStudents.length">
                暂无学生学习
              </div>
              <el-tooltip
                placement="right-end"
                v-for="(item, index) in findUnselectStudent"
                :key="index"
                effect="light"
                popper-class="studentTooltip"
                :open-delay="500"
              >
                <div class="student" @click="handelSelect(item)" :tabindex="-1">
                  <div class="picBox">
                    <img v-lazy="item.iconPath" />
                  </div>
                  <div
                    class="name"
                    :title="
                      item.realName ||
                      item.nickName ||
                      item.email ||
                      item.regName
                    "
                  >
                    {{
                      item.realName ||
                      item.nickName ||
                      item.email ||
                      item.regName
                    }}
                  </div>
                </div>
                <div slot="content" class="toolTipContent">
                  <div
                    class="name"
                    :title="
                      item.realName ||
                      item.nickName ||
                      item.email ||
                      item.regName
                    "
                  >
                    {{
                      item.realName ||
                      item.nickName ||
                      item.email ||
                      item.regName
                    }}
                  </div>
                  <div class="teamName">{{ item.className || "班级：无" }}</div>
                  <div class="teamName">{{ item.stuNum || "学号：无" }}</div>
                  <div class="progressBox">
                    <div class="title">任务进展：</div>
                    <div class="statistics">
                      <statisticsTask :student="item" />
                    </div>
                  </div>
                </div>
              </el-tooltip>
            </div>
            <div class="selectAll">
              <button
                :class="{ confirmDisabled: !findUnselectStudent.length }"
                @click="handelSelectAll"
                :disabled="!findUnselectStudent.length"
              >
                全选
              </button>
            </div>
          </div>
          <div class="selected">
            <div class="title">已选学生</div>
            <div class="studentsList">
              <div class="" v-if="!selectedStudent.length">暂无已选学生</div>
              <el-tooltip
                placement="right-end"
                v-for="(item, index) in selectedStudent"
                :key="index"
                effect="light"
                popper-class="studentTooltip"
                :open-delay="500"
              >
                <div class="student" @click="handelClear(item)" :tabindex="-1">
                  <div class="picBox">
                    <img v-lazy="item.iconPath" />
                  </div>
                  <div
                    class="name"
                    :title="
                      item.realName ||
                      item.nickName ||
                      item.email ||
                      item.regName
                    "
                  >
                    {{
                      item.realName ||
                      item.nickName ||
                      item.email ||
                      item.regName
                    }}
                  </div>
                </div>
                <div slot="content" class="toolTipContent">
                  <div class="teamName">班级：{{ item.className || "无" }}</div>
                  <div class="progressBox">
                    <div class="title">任务进展：</div>
                    <div class="statistics">
                      <statisticsTask :student="item" />
                    </div>
                  </div>
                </div>
              </el-tooltip>
            </div>
            <div class="btnBox">
              <button
                class="confirm"
                :class="{ confirmDisabled: !selectedStudent.length }"
                @click="handelConfirmCorrect"
                :disabled="!selectedStudent.length"
              >
                确认批阅
              </button>
              <button class="clear" @click="handelClearAll">全部移除</button>
            </div>
          </div>
        </div>
      </el-dialog>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
        class="deleteStudentDialog"
      >
        <span v-if="deleteStudent"
          >是否将学生：“{{ deleteStudent.row | filterName }}” 移除选修</span
        >
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleConfirmDelete"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import courseHeadInfo from "@/components/teacherPage/courseHeadInfo/courseHeadInfo";
import statisticsTask from "@/components/statisticsTask/statisticsTask";
import { getCurrNoData, getCourseData } from "@/request/teacher";
import {
  getCourseDetail,
  getCurriculumCourse,
  deleteChoose,
} from "@/request/courses";
import { location } from "@/util/tool";
import selectClassBtn from "@/components/selectClass/component/selectClassBtn";
import FollowTable from "../follow/followTable/followTable.vue";

export default {
  components: {
    courseHeadInfo,
    statisticsTask,
    FollowTable,
    selectClassBtn,
  },
  data() {
    return {
      search: "",
      showMenu: false,
      showSelectMoreStudent: false, // 多选学生弹出框
      studentsList: [], //学生列表
      unselectStudent: [], // 未选学生列表
      selectedStudent: [], // 已选学生列表
      courseInfo: {}, // 课程信息
      courseData: {}, // 开设课程信息
      location: location(window),
      sortName: "", // 排序的字段名称
      pageStatus: true, // 页面状态
      dialogVisible: false,
      deleteStudent: null,
      loading: false,
    };
  },
  created() {
    // getCourseData({courseID: this.$route.query.courseID}).then(res =>{
    // })
    this.fetchCourseInfo({ id: this.$route.query.courseID });

    // let defaultData = {
    //   iconPath: "https://www.codelover.club/stutasks/1615194640376_vue.jpg",
    //   name: "用户名",
    //   teamName: "小组名",
    //   numb: 13,
    //   id: 1,
    //   statistics: {
    //     taskCount: 70, // 任务总数
    //     uLearn: 20, // 未学任务数
    //     learning: 30, // 在学任务数
    //     learned: 20, // 已学任务数
    //   },
    // };

    // for (let i = 0; i < 100; i++) {
    //   defaultData.id = i + 1;
    //   defaultData.name = i + 1;
    //   this.studentsList.push(Object.assign({}, defaultData));
    // }
    // 浅拷贝数组 当原数组发生改变时 当前内存地址也会传递
    // this.unselectStudent = this.studentsList;

    // this.$nextTick(() => {
    //   let dropdownMenu = this.$refs["studentList-dropdown"];
    //   dropdownMenu.popperElm.classList.add("studentList-sortdropdownMenu");
    // });
    this.fetchCurrNoData({
      currNo: Number(this.$route.query.currNo),
      className: this.$route.query.filter
        ? this.$route.query.filter.indexOf("全部") !== -1
          ? undefined
          : this.$route.query.filter
        : undefined,
    });
  },
  computed: {
    // 过滤搜索的内容
    filterStudents() {
      if (this.search !== "") {
        let nArr = this.studentsList.filter((item) => {
          let reg = new RegExp(`${this.search}`);
          return (
            item?.realName?.match(reg)?.length ||
            item?.stuNum?.match(reg)?.length ||
            item?.className?.match(reg)?.length
          );
        });
        return nArr;
      }
      return this.studentsList;
    },
    // 过滤已选择的学生
    findUnselectStudent() {
      const nArr = [...this.unselectStudent, ...this.selectedStudent];
      let nUS = nArr.filter((item) => {
        return !(
          this.unselectStudent.includes(item) &&
          this.selectedStudent.includes(item)
        );
      });
      return nUS;
    },
  },
  watch: {
    async courseData(newValue) {
      if (newValue.classIDList) {
        this.changeClassIDToName()
      }
    }
  },
  filters: {
    filterName(value) {
      return value.realName || value.nickName || value.regName || value.email;
    },
  },
  methods: {
    fetchCourseInfo(parmas) {
      getCourseDetail(parmas).then((res) => {
        if (res.errno === 0) {
          this.courseInfo = res.data;
          this.fetchCurrCourseInfo();
        }
      });
    },
    // 获取开设课程时的课程信息
    fetchCurrCourseInfo() {
      const currNo = this.$route.query.currNo;
      getCurriculumCourse({ id: currNo }).then((res) => {
        if (res.errno === 0) {
          this.courseInfo.name = res.data.name;
          this.courseData = res.data;
        } else {
          this.$antdMessage.warning({
            content: "获取已开设课程数据失败！",
          });
        }
      });
    },
    // 获取对应课程学生的基本选修数据
    fetchCurrNoData(params) {
      this.loading = true
      getCurrNoData(params).then((data) => {
        if (data) {
          this.studentsList = data;
          this.handelSort("stuNum", true);
          // 浅拷贝数组 当原数组发生改变时 当前内存地址也会传递
          this.unselectStudent = this.studentsList;
          this.loading = false
        }
      });
    },
    // 删除学生选修
    handleDeleteStudentChoose(data) {
      this.studentsList = this.studentsList.filter(
        (item) => item.userID !== data.userID
      );
    },
    // 路由跳转
    handelRoute(item) {
      this.$router.push({
        name: "Correct",
        query: {
          currNo: this.$route.query.currNo,
          courseID: this.$route.query.courseID,
          // Multiple: JSON.stringify([item.userID]),
          chooseNo: item.chooseNo, // 获取单人数据
        },
        params: {
          id: this.$route.query.currNo,
        },
      });
    },
    // 下拉菜单状态改变
    handelChange(val) {
      this.showMenu = val;
    },
    // 排序 todo 有的时候顺序不一样
    handelSort(name, firstFormat) {
      if (this.sortName === name)
        return (this.sortName = ""), this.handelSort("stuNum", true);
      if (name === "realName") {
        this.studentsList.sort(function (a, b) {
          return a[name]?.localeCompare(b[name]);
        });
      } else if (name == "finishedCount") {
        this.studentsList
          .sort(function (a, b) {
            return (
              a[name] - b[name] ||
              a["studyingCount"] - b["studyingCount"] ||
              !(a["notStartCount"] - b["notStartCount"])
            );
          })
          .reverse();
      } else {
        this.studentsList.sort((a, b) => {
          return a[name] - b[name];
        });
      }
      // debugger
      if (!firstFormat) this.sortName = name;
    },
    // 多选学生
    handelSelectMore() {
      this.showSelectMoreStudent = true;
    },
    // 关闭dialog
    closeDialog() {
      this.showSelectMoreStudent = false;
    },
    // 选择学生
    handelSelect(student) {
      this.selectedStudent.push(student);
    },
    // 移除学生
    handelClear(student) {
      let findS = this.selectedStudent.filter(
        (item) => item.userID !== student.userID
      );
      this.selectedStudent = findS;
    },
    // 全选
    handelSelectAll() {
      this.selectedStudent = this.unselectStudent;
    },
    // 全部清除
    handelClearAll() {
      this.selectedStudent = [];
    },
    // 改变页面布局状态
    handleChangePageStatus() {
      this.pageStatus = !this.pageStatus;
    },
    // 确认批阅
    handelConfirmCorrect() {
      // 未选学生阻止跳转
      if (!this.selectedStudent.length) return;
      let userList = this.selectedStudent.map((item) => {
        return item.userID;
      });
      this.closeDialog();
      this.$nextTick(() => {
        let params = {
          name: "Correct",
          query: {
            currNo: this.$route.query.currNo,
            courseID: this.$route.query.courseID,
            Multiple: JSON.stringify(userList),
          },
          params: {
            id: this.$route.query.currNo,
          },
        };
        this.$router.push(params);
      });
    },
    // 筛选班级
    async handleChange(val) {
      const list = await this.$store.dispatch("class/gClassList");
      const findClass = list.find(item => item.className == val)
      // debugger
      this.fetchCurrNoData({
        currNo: Number(this.$route.query.currNo),
        // className: val.join(",") ? val.join(",") : undefined,
        className: findClass ? undefined : val ? (val !== "全部" ? val : undefined) : undefined,
        classID: findClass ? findClass.classID : undefined
      });
    },
    // 对话框关闭的回调
    handleClose() {
      this.dialogVisible = false;
    },
    // 弹出删除对话框
    showDeleteDialog(item) {
      this.dialogVisible = true;
      this.deleteStudent = item;
    },
    // 确认删除
    handleConfirmDelete() {
      this.handleDeleteChoose(this.deleteStudent);
    },
    // 删除选修
    handleDeleteChoose(item) {
      let studenInfo = item.row;
      if (!studenInfo || !studenInfo.chooseNo || !studenInfo.userID) {
        this.$antdMessage.error({
          content: "获取学生信息失败，请刷新后重试!",
        });
        this.dialogVisible = false;
        return;
      }
      let params = {
        chooseNo: studenInfo.chooseNo,
        userID: studenInfo.userID,
        // isRealDel: false, // 彻底删除
      };
      deleteChoose(params).then((res) => {
        if (res.errno === 0) {
          this.$antdMessage.success({
            content: "学生已被移除",
          });
          this.handleDeleteStudentChoose(params);
        } else {
          this.$antdMessage.error({
            content: res.message || "操作失败",
          });
        }
        this.dialogVisible = false;
      });
    },
     // 获取班级信息
    async changeClassIDToName() {
      const list = await this.$store.dispatch("class/gClassList");
      this.courseData.classNameList = list
        .filter((item) =>
          this.courseData.classIDList.split(",").includes(item.classID + "")
        )
        .map((item) => item.className)
        .join(",");
    },
  },
};
</script>

<style lang="stylus">
.studentList {
  padding-bottom: 20px;

  .main {
    margin: 0 auto;
    max-width: 1200px;

    .nStusTips {
      // margin-top 10px
    }

    .toolBar {
      padding-bottom: 5px;
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      height: 70px;

      .searchInput {
        width: 309px;
        height: 36px;

        .input-with-select {
          .el-input__inner {
            height: 36px;
            line-height: 36px;
            border-color: #d9dde1;
            border-right: none;
            color: #333333;
          }

          .el-input-group__append {
            // line-height: 35px;
            background: #f1ae3d;
            border-color: #f1ae3d;

            .iconsearch {
              color: #fff;
            }
          }
        }
      }

      .el-select {
        margin-left: 25px;
        max-width: unset !important;
        min-height: 36px;
        overflow: hidden;
        z-index: 998;

        .el-select__tags {
          .el-tag {
            height: auto;

            span {
              max-width: 90%;
              white-space: initial;
              height: auto;
            }
          }
        }

        .el-input__inner {
          height: 36px;
          min-height: 36px;
        }

        .el-input__icon {
          line-height: 36px;
        }
      }

      .dropdownMenu {
        margin-left: 40px;

        .el-dropdown {
          cursor: pointer;
          background: #fff !important;
          padding-left: 9px;
          width: 108px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          border: solid 1px #d9dde1;
          border-radius: 5px;
          box-shadow: none;

          .el-dropdown-link {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-family: PMingLiU-ExtB;
            font-size: 14px;
            color: #666666;

            .sortIcon {
              margin-right: 6px;
              width: 16px;
              height: 15px;
              vertical-align: middle;
              object-fit: contain;
            }

            i {
              margin: 0 10px 0 auto;
            }
          }
        }
      }

      .showMenu {
        .el-dropdown {
          border-bottom: 0;
          border-bottom-right-radius: 0;
          border-bottom-left-radius: 0;
        }
      }

      .multipleStudent-btn {
        margin-left: 49px;

        button {
          outline: none;
          cursor: pointer;
          width: 81px;
          height: 32px;
          background-color: #1c4e93;
          border-radius: 5px;
          font-family: PMingLiU-ExtB;
          font-size: 14px;
          color: #ffffff;
          border: none;
        }
      }

      .changePageStatus {
        margin-left: 49px;

        img {
          cursor: pointer;
          object-fit: cover;
          height: 30px;
        }

        .changePageStatus_hover_img {
          display: none;
        }
      }

      .changePageStatus:hover {
        img {
          display: none;
        }

        .changePageStatus_hover_img {
          display: block;
        }
      }
    }

    .students {
      min-height: 100px;
      .item-listBox {
        .studentInfo {
          cursor: pointer;
          padding: 11px 15px 14px 16px;
          margin: 25px 15px 0 0;
          width: 228px;
          height: 271px;
          background-color: #ffffff;
          box-shadow: 0px 8px 16px 0px rgba(159, 178, 196, 0.16);
          border-radius: 10px;
          border: solid 1px #e5e8ec;

          .teamName {
            max-width: 100%;
            text-overflow: ellipsis;
            overflow: hidden;
            font-family: PMingLiU-ExtB;
            font-size: 14px;
            color: #666666;
          }

          .picture {
            margin-top: 16px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-flow: column;

            .imgBox {
              width: 95px;
              height: 95px;
              // background-color: rgba(0, 0, 0, 0.4);
              border-radius: 50%;
              overflow: hidden;

              img {
                width: 100%;
                height: 100%;
                image-rendering: -webkit-optimize-contrast;
                object-fit: cover;
              }
            }

            .name {
              margin-top: 19px;
              max-width: 90%;
              line-height: 1;
              font-family: PMingLiU-ExtB;
              font-size: 16px;
              color: #333333;
              word-break: break-all;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }

          .scoreBox {
            margin-top: 15px;
            display: flex;
            justify-content: flex-start;

            .score {
              flex: 1;
              margin-right: 42px;
              max-width: 35px;
              position: relative;
              text-align: center;
              font-family: PMingLiU-ExtB;
              font-size: 16px;
              color: #666666;

              span {
                position: relative;

                .badge {
                  position: absolute;
                  top: -7px;
                  right: -19px;
                  width: 18px;
                  height: 16px;
                  font-family: PMingLiU-ExtB;
                  font-size: 12px;
                  color: #ffffff;
                }
              }
            }

            .score:last-child {
              margin: 0;
            }
          }
        }

        .fiveisLast {
          margin-right: 0;
        }
      }
    }

    .el-dialog__wrapper {
      z-index: 9999 !important;
    }

    .selectMoreStudentsDialog {
      .el-dialog__header {
        padding: 14px 18px 10px;

        .dialogHead {
          display: flex;
          justify-content: flex-end;

          .countStudent {
            font-family: PMingLiU-ExtB;
            font-size: 14px;
            color: #666666;
          }

          .closeIcon {
            margin-left: 61px;

            img {
              cursor: pointer;
              object-fit: cover;
            }
          }
        }

        .el-dialog__headerbtn {
          display: none;
        }
      }

      .el-dialog__body {
        padding: 0 8px 16px 30px !important;

        .contentBox {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;

          .unselect {
            margin-right: 1vw;
            width: 36vw;

            // height: 32vw;
            .title {
              font-family: PMingLiU-ExtB;
              font-size: 14px;
              color: #333333;
            }

            .studentsList {
              padding-top: 3px;
              margin-top: 23px;
              display: flex;
              justify-content: flex-start;
              align-items: flex-start;
              align-content: flex-start;
              flex-flow: row wrap;
              height: 26vw;
              overflow-y: scroll;

              .student {
                cursor: pointer;
                margin-bottom: 23px;
                margin-right: 26px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                width: 56px;
                height: 72px;

                .picBox {
                  width: 48px;
                  height: 48px;

                  img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                  }
                }

                .name {
                  max-width: 90%;
                  line-height: 1;
                  font-family: PMingLiU-ExtB;
                  font-size: 14px;
                  color: #333333;
                  word-break: break-all;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                }
              }

              .student:hover {
                box-shadow: 0 1px 6px -5px;
                background: rgba(0, 0, 0, 0.01);
              }
            }

            .selectAll {
              margin-top: 25px;
              text-align: center;

              button {
                cursor: pointer;
                outline: none;
                width: 114px;
                height: 32px;
                line-height: 32px;
                background-color: #003262;
                border: none;
                border-radius: 5px;
                font-family: PMingLiU-ExtB;
                font-size: 14px;
                color: #ffffff;
              }
            }

            .studentsList::-webkit-scrollbar {
              margin-right: 5px;
              padding-right: 5px;
              width: 2px;
              height: 1px;
            }

            /* 定义滚动条的滑块的样式有圆角和阴影以及自定义的背景色 */
            .studentsList::-webkit-scrollbar-thumb {
              border-radius: 5px;
              -webkit-box-shadow: inset 0 0 1px #c6c9cb;
              background: #c6c9cb;
            }
          }

          .selected {
            // flex: 1;
            width: 19vw;
            height: 32vw;

            .title {
              padding-left: 3vw;
              font-family: PMingLiU-ExtB;
              font-size: 14px;
              color: #333333;
            }

            .studentsList {
              padding-left: 40px;
              padding-top: 3px;
              margin-top: 23px;
              display: flex;
              justify-content: flex-start;
              align-items: flex-start;
              align-content: flex-start;
              flex-flow: row wrap;
              height: 26vw;
              overflow-y: scroll;
              border-left: 1px dashed #c6c9cb;

              .student {
                cursor: pointer;
                margin-bottom: 23px;
                margin-right: 24px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 56px;
                height: 72px;

                .picBox {
                  width: 48px;
                  height: 48px;

                  img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                  }
                }

                .name {
                  max-width: 90%;
                  margin-top: 5px;
                  font-family: PMingLiU-ExtB;
                  font-size: 14px;
                  color: #333333;
                  word-break: break-all;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                }
              }
            }

            .studentsList::-webkit-scrollbar {
              margin-right: 5px;
              padding-right: 5px;
              width: 2px;
              height: 1px;
            }

            /* 定义滚动条的滑块的样式有圆角和阴影以及自定义的背景色 */
            .studentsList::-webkit-scrollbar-thumb {
              border-radius: 5px;
              -webkit-box-shadow: inset 0 0 1px #c6c9cb;
              background: #c6c9cb;
            }

            .btnBox {
              margin-top: 22px;
              display: flex;
              justify-content: flex-end;
              align-items: center;

              .confirm, .clear {
                cursor: pointer;
                outline: none;
                width: 81px;
                height: 32px;
                line-height: 32px;
                background-color: #003262;
                border-radius: 5px;
                border: none;
                font-family: PMingLiU-ExtB;
                font-size: 14px;
                color: #ffffff;
              }

              .clear {
                margin-right: 42px;
                padding: 0;
                margin-left: 34px;
                width: auto;
                background: transparent;
                color: #003262;
              }
            }
          }
        }
      }
    }

    .deleteStudentDialog {
      margin-top: 15vh;
    }

    .confirmDisabled {
      background: rgba(111, 111, 111, 0.3) !important;
      cursor: not-allowed !important;
    }
  }
}

.studentList-sortdropdownMenu {
  margin: 0 !important;
  padding: 12px 0 12px;
  width: 108px;
  background-color: #ffffff;
  border-radius: 5px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border: solid 1px #d9dde1;
  border-top: none;
  overflow: hidden;

  .popper__arrow {
    display: none;
  }

  .popper__arrow::after {
    content: none;
  }

  .el-dropdown-menu__item {
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 19px;
    background: #fff !important;
    font-family: PMingLiU-ExtB;
    font-size: 14px;
    color: #555555;
  }
}

.statisticsTaskTooltip {
  border-color: #d9dde1 !important;

  .popper__arrow {
    border-bottom-color: #d9dde1 !important;
  }
}

.studentTooltip {
  padding: 12px 10px 16px;
  border-color: #afb7c2 !important;
  width: 156px;
  min-height: 98px;

  .toolTipContent {
    .teamName {
      font-family: PMingLiU-ExtB;
      font-size: 14px;
      color: #333333;
    }

    .progressBox {
      margin-top: 8px;

      .title {
        font-family: PMingLiU-ExtB;
        font-size: 14px;
        color: #333333;
      }

      .statistics {
        .statisticsTask {
          margin-top: 5px;
        }
      }
    }
  }

  .popper__arrow {
    // border-bottom-color: #afb7c2 !important;
    // border-bottom-color: #afb7c2 !important;
    border-right-color: #afb7c2 !important;
  }
}
</style>